---
title: علامة صحيح
image: /images/user-guide/tasks/tasks_header.png
---

<Frame>
  <img src="/images/user-guide/tasks/tasks_header.png" alt="Header" />
</Frame>

يمثل إجراءً ناجحًا أو مكتملًا.

<Tabs>
<Tab title="Usage">

```jsx
import { Checkmark } from 'twenty-ui/display';

export const MyComponent = () => {
  return <Checkmark />;
};
```

</Tab>

<Tab title="Props">

يمتد `React.ComponentPropsWithoutRef<'div'>` و يقبل جميع خصائص عنصر `div` العادي.

</Tab>

</Tabs>

## علامة صحيح متحركة

يمثل رمز علامة صحيح مع ميزة الإضافة للحركة.

<Tabs>

<Tab title="Usage">

```jsx
import { AnimatedCheckmark } from 'twenty-ui/display';

export const MyComponent = () => {
  return (
    <AnimatedCheckmark
      isAnimating={true}
      color="green"
      duration={0.5}
      size={30}
    />
  );
};
```

</Tab>

<Tab title="Props">

| المحددات    | النوع       | الوصف                                 | الإعداد الافتراضي         |
| ----------- | ----------- | ------------------------------------- | ------------------------- |
| isAnimating | قيمة منطقية | يتحكم فيما إذا كانت علامة صحيح متحركة | خاطئ                      |
| اللون       | string      | Color of the checkmark                |                           |
| المدة       | رقم         | مدة الحركة بالثواني                   | 0.5 ثانية |
| الحجم       | رقم         | The size of the checkmark             | 28 بكسل                   |

</Tab>

</Tabs>
